<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/fe' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>面试邀请</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 中间卡片视图 -->
    <el-card>
      <el-table :data="userlist" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="出生年月" prop="birth"></el-table-column>
        <el-table-column label="学历" prop="edu"></el-table-column>
        <el-table-column label="工作经验" prop="expir"></el-table-column>
        <el-table-column label="提交时间" prop="putime"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-button
              type="primary"
              icon="el-icon-zoom-in"
              size="mini"
              @click="drawer = true"
              style="margin-left: 16px"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="2"
      >
      </el-pagination>

      <!-- 轮播 -->

      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item>
          <img src="https://pic3.zhimg.com/v2-831fca64031f66a69c523dae5a230e8a_r.jpg" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://up.enterdesk.com/edpic_source/ff/41/20/ff4120f6768de51334e6f5d508427bbf.jpg" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://up.enterdesk.com/edpic_source/ff/41/20/ff4120f6768de51334e6f5d508427bbf.jpg" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://up.enterdesk.com/edpic_source/be/85/30/be853001316e5d20f6440fe281ccf6bd.jpg" />
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <!-- 查看信息 -->
    <el-radio-group v-model="direction">
    </el-radio-group>
    <el-drawer
      title="基本信息"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <span>
        <el-form label-width="70px" label-left="0px">
          <el-form-item label="照片">
            <img src="~@/assets/LL.png" alt="" />
          </el-form-item>
          <el-form-item label="姓名"> 刘昊然 </el-form-item>
          <el-form-item label="性别" style="text-align: left">
            男
          </el-form-item>
          <el-form-item label="出生年月"> 1997-10-10 </el-form-item>
          <el-form-item label="学历"> 本科 </el-form-item>
          <el-form-item label="工作经验"> 8年 </el-form-item>
          <el-form-item label="提交时间"> 2020-12-31 </el-form-item>
          <el-form-item label="基本经历">2013年，主演电影《北京爱情故事》 。</el-form-item>
        </el-form>
      </span>
    </el-drawer>
    
  </div>
</template>

<script>
export default {
  name: 'Recruit',
  data() {
    return {
      // 假数据
      userlist: [
        {
          name: '刘昊然',
          sex: '男',
          birth: '1997-10-13',
          edu: '本科',
          expir: '3年',
          putime: '2020-12-31',
        },
        {
          name: '刘昊然',
          sex: '男',
          birth: '1997-10-13',
          edu: '本科',
          expir: '3年',
          putime: '2020-12-31',
        },
      ],
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      total: 0,
      //控制显示用户信息用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查看信息
      drawer: false,
      direction: 'rtl',
    }
  },
  methods: {
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      // this.getUserList()
    },

    // 监听页码值改变的事件
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      // this.getUserList()
    },
    // 展示显示用户信息的对话框
    async showEditDialog(id) {
      this.editDialogVisible = true
    },
    //查看信息
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-form {
  margin-left:40px;
}
.el-form-item {
  text-align: left;
}

/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>
